<template>
     <van-cell class="article-item"
      :to="`/article/${article.art_id}`" >
      <div slot="title" class="item-title van-multi-ellipsis--l2">{{ article.title }}</div>

       <div slot="label" class="item-labels">
        <div class="label-img" v-if="article.cover.type === 3">
            <van-image class="label-img-item" v-for="(img, index) in article.cover.images" :key="index"
              :src="img"
            />
        </div>
        <div class="label-info-wrap">
        <span>{{ article.aut_name }}</span>
        <span>{{ article.comm_count }}评论</span>
        <span>{{ article.pubdate | relativeTime }}</span>
        </div>
      </div>

        <van-image class="right-img" slot="default"
        v-if="article.cover.type === 1"
          :src="article.cover.images[0]"
        />

     </van-cell>
  </template>

<script>
export default {
  name: 'ArticleItem',
  components: {},
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

  <style scoped lang="less">
.article-item{
    padding-top:  20px;
    padding-bottom: 20px;
    .item-title{
        font-size: 32px;
       color: #3a3a3a;
    }
    .van-cell__value{
        flex: unset;
        width: 232px;
        height: 146px;
        padding-left: 20px;

        .right-img {
           width: 232px;
           height: 146px;
          }

    }

    .label-info-wrap{
        padding-top: 15px;
        padding-bottom: 5px;

        span{
        font-size: 22px;
        color: #b4b4b4;
        margin-right: 25px;
    }
    }

    .label-img{
        display: flex;
        width: 100%;
        padding: 15px 0;
        .label-img-item{
            flex: 1;
            height: 146px;
            &:not(:last-child) {
            padding-right: 4px;
           }
        }
    }
}

</style>
